<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="initial-scale=1.0, target-densitydpi=device-dpi" />
<meta name="viewport" content="initial-scale=1.0, width=device-height">
<link rel="stylesheet" href="/workflow/resource/src/layui/css/layui.css">
<script src="/workflow/resource/src/js/jquery-1.11.0.min.js"></script>
<script src="/workflow/resource/src/signature/jq-signature.min.js"></script>
<title>短信平台-首页</title>
</head>
<body>
	<div style="text-align: center;">
		<button type="button" class="layui-btn layui-btn-primary button1"
			onclick="clearCanvas(1)">交件人签字</button>
		<button type="button" class="layui-btn  button2"
			onclick="clearCanvas(1)">接件人签字</button>
	</div>
	<div class="js-signature" data-width="600" data-height="200"
		data-border="1px solid black" data-line-color="#bc0000"
		data-auto-fit="true"></div>
	<div style="text-align: center;">
		<button id="butSubmit" class="layui-btn" onclick="saveSignature()">保存</button>
		<button type="button" class="layui-btn layui-btn-primary"
			onclick="clearCanvas(0)">重置</button>
		<button id="butSubmit" class="layui-btn" onclick="closeLayer()">提交</button>
	</div>
	<!-- hide -->
	<input id="incidentid" type="hidden" value='${incidentid}'/>
	<script type="text/javascript">
		var p = 2, imgs="", imga="";
		$(document).on('ready', function() {
			$('.js-signature').jqSignature();
		});

		$('.button1').on('click', function(b) {
			b.preventDefault();//
			$('.button1').removeClass("layui-btn-primary");
			$('.button2').addClass("layui-btn-primary");
			p = 1;
		});

		$('.button2').on('click', function(b) {
			b.preventDefault();//
			$('.button2').removeClass("layui-btn-primary");
			$('.button1').addClass("layui-btn-primary");
			p = 2;
		});

		function clearCanvas(i) {
			$('#signature')
					.html(
							'<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
			$('.js-signature').jqSignature('clearCanvas');
			$('#butSubmit').attr('disabled', true);
			if(i==0){
				if(p==1){
					imgs="";
				}else if(p==2){
					imga="";
				}
			}
		}

		function saveSignature() {
			$('#signature').empty();
			var dataUrl = $('.js-signature').jqSignature('getDataURL');
			//var img = $('<img>').attr('src', dataUrl);
			// $('#signature').append($('<p>').text("Here's your signature:"));
			//$('#signature').append(img);
			console.log("保存签名");
			var file = dataURLtoFile(dataUrl, "filename.jpg");
			var formdata = new FormData();
			formdata.append("file", file);
			 $.ajax({
				    url: '/workflow/fileuploads/morefileupload',
				    type: 'POST',
				    data: formdata,                    // 上传formdata封装的数据
				    dataType: 'JSON',
				    cache: false,                      // 不缓存
				    processData: false,                // jQuery不要去处理发送的数据
				    contentType: false,                // jQuery不要去设置Content-Type请求头
				    success:function (data) {           //成功回调
				        if(p==1){
				        	imgs=data.data[0];
				        	alert("保存成功!");
				        }else if(p==2){
				        	imga=data.data[0];
				        	alert("保存成功!");
				        }
				    }
				});
		}

		$('.js-signature').on('jq.signature.changed', function() {
			$('#butSubmit').attr('disabled', false);
		});

		function closeLayer() {
			if(imga==''){
				alert("接件人必须签名并保存");
				return false;
			}
			if(imgs==''){
				alert("交件人必须签名并保存");
				return false;
			}
			 $.ajax({
				type : 'POST',
				url : '/workflow/incidentManager/incidentthingsignature',
				data : {incidentid:$("#incidentid").val(),signaturea:imga,signatures:imgs},
				dataType : 'json',
				success : function(data) {
					if(data.success){
						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index); 
					}else{
						alert(data.message);
					}
					
				}
			}); 
			
		}


		function dataURLtoFile(dataurl, filename) {
			var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(
					n);
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n);
			}
			return new File([ u8arr ], filename, {
				type : mime
			});
		}
	</script>
</body>
</html>